<#import "../common/layout.ftl" as layout/>
<#import "../common/dataTables.ftl" as dataTables/>
<#import "../common/modern-forms.ftl" as mform/>
<#import "../common/modal.ftl" as modal/>
<#import "../common/menuTree.ftl" as menuTree/>

<!DOCTYPE html>
<html>
<@layout.head title="系统管理">
    <@dataTables.head/>
    <@dataTables.buttons_head/>
    <@dataTables.select_head/>
    <@mform.head/>
    <@menuTree.head/>
</@layout.head>
<body>
<@layout.page>
<div class="main-box">
    <!-- 标题 -->
    <#--<h4 class="page-header">-->
        <#--<i class="fa fa-cog fa-spin"></i>-->
        <#--系统管理-->
    <#--</h4>-->
    <!-- 表格 -->
    <div class="content">
        <!-- 查询框 -->
        <@mform.container id="formQuery">
            <@mform.row>
            </@mform.row>
        </@mform.container>
        <!-- 按钮 -->
        <div id="mSystemBtnGroup" class="btn-group">
            <button type="button" class="btn btn-blue btn-sm" onclick="javascript:refreshData();">
                <i class="fa fa-refresh"></i> 刷新
            </button>
            <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" onclick="javascript:newmSystem();">
                <i class="fa fa-plus"></i> 新增
            </button>
            <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" onclick="javascript:editmSystem();">
                <i class="fa fa-edit"></i> 修改
            </button>
            <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" onclick="javascript:delmSystem();">
                <i class="fa fa-remove"></i> 删除
            </button>
        </div>
        <!-- 表格 -->
        <@dataTables.commonTable id="tabmSystem"/>
        <!-- 弹出窗 -->
        <@modal.editModal id="modal-mSystem" buttonId="btnmSystemSave" width="500px">
            <@mform.container id="systemEditForm">
                <input id="cSystemID" name="cSystemID" type="hidden"/>
                <@mform.row>
                    <@mform.input_text id="iOrder" name="iOrder" size=12
                    label="序号" placeholder="请输入序号" icon="fa-edit" />
                    <@mform.input_text id="cSystemName" name="cSystemName" size=12
                    label="系统名" placeholder="请输入系统名" icon="fa-edit" />
                    <@mform.input_text id="cVersion" name="cVersion" size=12
                    label="版本号" placeholder="请输入版本号" icon="fa-edit"/>
                    <@mform.input_text id="cDescribe" name="cDescribe" size=12
                    label="描述" placeholder="请输入描述" icon="fa-edit"/>
                </@mform.row>
            </@mform.container>
        </@modal.editModal>
        <@modal.editModal id="systemASmodel" buttonId="" width="300px" height="270px">
            <div class="panel-heading">
                <b>模块列表</b>
            </div>
            <input id="modelid" name="modelid" type="hidden"/>
            <input id="systemID" name="systemID" type="hidden"/>
            <div id="menuTree" class="panel-body fancytree-colorize-hover fancytree-fade-expander"
                 style="min-height: 300px;padding: 0;">
            </div>
        </@modal.editModal>
    </div>
</div>
</@layout.page>

<@layout.foot>
    <@dataTables.foot/>
    <@dataTables.buttons_foot/>
    <@dataTables.select_foot/>
    <@mform.foot/>
    <@menuTree.foot/>
<script type="text/javascript">
    $(function () {
        mSystemTable.queryData("systemmanage/queryAll");
    });
    var columns = [
        {"title": "序号", "data": "iOrder", "className": "tableColumns_center"},
        {"title": "系统名", "data": "cSystemName", "className": "tableColumns_center"},
        {"title": "版本号", "data": "cVersion", "className": "tableColumns_center"},
        {"title": "描述", "data": "cDescribe", "className": "tableColumns_left"},
        {
            "title": "设置模块",
            "data": null,
            "className": "tableColumns_center",
            "defaultContent": "<button type=\"button\" id=\"asmodels\" class=\"btn btn-link btn-table-icon\" title=\"设置系统对应模块\"><i class='fa fa-exchange'></i></button>"
        }
    ];
    var mSystemTable = $('#tabmSystem').winningTable({
        columns: columns,
        pageLength: 10,
        toolbar: "#mSystemBtnGroup",
        searching: true,
        buttons: [

        ]
    });

    //按钮
    function refreshData() {
        mSystemTable.queryData("systemmanage/queryAll");
    }

    function newmSystem() {
        $('#modal-mSystem').find(".modal-title").text('新增系统信息');
        clearForm($('#modal-mSystem'));
        $("#btnmSystemSave").unbind();
        $("#btnmSystemSave").click(function () {
            systemSave("insert");
        });
        $('#modal-mSystem').modal();
    }

    function editmSystem() {
        var datas = mSystemTable.getSelectedDatas();
        if (datas == null || datas.length == 0 || datas.length > 1) {
            swal("错误", "请选择一行数据", "error");
            return;
        }
        $("#modal-mSystem").find(".modal-title").text("修改系统信息");
        clearForm($("#modal-mSystem"));
        var data = datas[0];
        initFormItemData($("#systemEditForm"), data);
        $("#btnmSystemSave").unbind();
        $("#btnmSystemSave").click(function () {
            systemSave("update");
        });
        $("#modal-mSystem").modal();
    }

    function delmSystem() {
        var datas = mSystemTable.getSelectedDatas();
        if (datas == null || datas.length == 0 || datas.length > 1) {
            swal("错误", "请选择一行数据", "error");
            return;
        }
        initFormItemData($("#systemEditForm"), datas[0]);
        swal({
            title: "确定删除",
            text: "是否确定删除此数据",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "是的,确定",
            cancelButtonText: "取消"
        }).then(function (result) {
            if (result.value) {
                systemSave("delete");
            }
        });
    }

    function systemSave(type) {
        var pass = validateItemNotNull($("#cSystemName"));
        if (!pass) {
            return;
        }
        var requestData = $("#systemEditForm form").serialize();
        $.ajax({
            type: 'POST',
            data: requestData,
            url: '${request.contextPath}/systemmanage/' + type,
            success: function (data) {
                //成功之后
                if (data.success) {
                    var newRow = data.data;
                    switch (type) {
                        case "insert":
                            var row = mSystemTable.dataTables.row.add(newRow).draw().node();
                            $(row).insertBefore(mSystemTable.dataTables.rows().nodes()[0]);
                            break;
                        case "update":
                            var index = mSystemTable.getSelectedRows()[0];
                            mSystemTable.dataTables.row(index).data(newRow);
                            break;
                        case "delete":
                            mSystemTable.getSelectedRows().remove().draw();
                            break;
                        default:
                            null;
                    }
                    $("#modal-mSystem").modal('hide');
                    $.bootstrapGrowl("操作成功", {
                        type: 'success',
                        align: 'center',
                        offset: {from: 'top', amount: 0}
                    });
                }
                else {
                    swal("错误", data.errorMsg, "error");
                }
            },
            error: function (xhr, type) {
                swal("错误", "系统发生内部错误!请稍后再试!", "error");
            }
        });
    }

    //选择模块
    var menuTree = null;
    var glyph_opts = {
        map: {
            doc: "glyphicon glyphicon-file",
            docOpen: "glyphicon glyphicon-file",
            checkbox: "glyphicon glyphicon-unchecked",
            checkboxSelected: "glyphicon glyphicon-check",
            checkboxUnknown: "glyphicon glyphicon-share",
            dragHelper: "glyphicon glyphicon-play",
            dropMarker: "glyphicon glyphicon-arrow-right",
            error: "glyphicon glyphicon-warning-sign",
            expanderClosed: "glyphicon glyphicon-menu-right",
            expanderLazy: "glyphicon glyphicon-menu-right",  // glyphicon-plus-sign
            expanderOpen: "glyphicon glyphicon-menu-down",  // glyphicon-collapse-down
            folder: "glyphicon glyphicon-folder-close",
            folderOpen: "glyphicon glyphicon-folder-open",
            loading: "glyphicon glyphicon-refresh glyphicon-spin"
        }
    };
    $('#tabmSystem').on("click", "#asmodels", function () {
        var item = mSystemTable.dataTables.row($(this).closest('tr')).data();
        getModels(item);
    });

    function getModels(item) {
        clearForm($("#systemASmodel"));
        var $modal = $("#systemASmodel");
        $modal.find(".modal-title").text("系统模块关联");
        var cSystemID = item.cSystemID;
        $("#systemID").val(cSystemID);
        if (menuTree != null) {
            $("#menuTree").fancytree("destroy");
        }
        menuTree = $("#menuTree").fancytree({
            extensions: ["edit", "glyph", "wide"],
            checkbox: true,
            glyph: glyph_opts,
            selectMode: 3,
            source: {
                url: "${request.contextPath}/systemmanage/menutree",
                data: {datas: "{\"cSystemID\":\"" + $("#systemID").val() + "\"}"}
            },
            wide: {
                iconWidth: "1em",     // Adjust this if @fancy-icon-width != "16px"
                iconSpacing: "0.5em", // Adjust this if @fancy-icon-spacing != "3px"
                levelOfs: "1.5em"     // Adjust this if ul padding != "16px"
            },
            toggleEffect: {effect: "drop", options: {direction: "left"}, duration: 400},
            icon: function (event, data) {
//                if (data.node.isFolder()) {
//                    return "glyphicon glyphicon-book";
//                }
            },
            select: function (event, data) {
                if (data.node.isSelected()) {
                    var IsChild = false;
                    var node = data.node;
                    $("#modelid").val(node.key);
                    if (node.hasChildren()) {
                        IsChild = true;
                    }
                    saveMenuAsSystem(IsChild);
                } else {
                    var IsChild = false;
                    var node = data.node;
                    $("#modelid").val(node.key);
                    if (node.hasChildren()) {
                        IsChild = true;
                    }
                    deleteMenuAsSystem(IsChild);
                }
            },
            activate: function (event, data) {//点击事件
//            onMenuNodeActivate(data.node);
//                alert(data.node.key);
            }
        });
        $modal.modal();
    }

    function deleteMenuAsSystem(IsChild) {
        var ajaxurl = "${request.contextPath}/systemmanage/associate/delete";
        if (IsChild == true) {
            ajaxurl = "${request.contextPath}/systemmanage/associate/deleteChild"
        }
        var systemid = $("#systemID").val();
        var modelid = $("#modelid").val();
        var data = {datas: "{\"systemid\":\"" + systemid + "\",\"modelid\":\"" + modelid + "\"}"};
        $.ajax({
            type: 'POST',
            data: data,
            url: ajaxurl,
            success: function (data) {
                //成功之后
                if (data.success) {
                    $.bootstrapGrowl("角色设置菜单成功!", {
                        type: 'success',
                        offset: {from: 'top', amount: 0},
                        align: 'center',
                        width: 'auto',
                        delay: 300
                    });
                }
                else {
                    swal("错误", data.errorMsg, "error");
                }
            },
            error: function (xhr, type) {
                swal("错误", "系统发生内部错误!请稍后再试!", "error");
            }
        });
    }

    function saveMenuAsSystem(IsChild) {
        var ajaxurl = "${request.contextPath}/systemmanage/associate/new";
        if (IsChild == true) {
            ajaxurl = "${request.contextPath}/systemmanage/associate/newChild"
        }
        var systemid = $("#systemID").val();
        var modelid = $("#modelid").val();
        var data = {datas: "{\"systemid\":\"" + systemid + "\",\"modelid\":\"" + modelid + "\"}"};
        $.ajax({
            type: 'POST',
            data: data,
            url: ajaxurl,
            success: function (data) {
                //成功之后
                if (data.success) {
                    $.bootstrapGrowl("角色设置菜单成功!", {
                        type: 'success',
                        offset: {from: 'top', amount: 0},
                        align: 'center',
                        width: 'auto',
                        delay: 300
                    });
                }
                else {
                    swal("错误", data.errorMsg, "error");
                }
            },
            error: function (xhr, type) {
                swal("错误", "系统发生内部错误!请稍后再试!", "error");
            }
        });
    }
</script>
</@layout.foot>
</body>
</html>